<template>
  <view class="familyTraditioDiscipline wh_750 flex flex-column align-center pageHeight bg_F5F5F5">
    <!-- 头部 -->
    <s-header-title ref="headerTitle" title="家风家训" :is-click="false" is-fixed
                  :z-index="10" :background="'transparent'" :isDisplayBack="page.options.is_share != 1"
                  :is-show-home="page.options.is_share == 1">
      <template>
        <view class="anniversariesList_headerTitle">
          <text class="anniversariesList_headerTitle_text">{{ page.familyInfo.family_name }}</text>
        </view>
      </template>
    </s-header-title>
    <view class="bg">
      <view class="content">
        <scroll-view class="content_scroll" scroll-y>
          <view class="text">
            <!--            <mp-html :content="page.family_tradition"></mp-html>-->
            <textarea class="textareGap_center_textarea"
                      v-model="page.family_tradition"
                      placeholder-class="textarePlaceholder"
                      auto-height
                      disabled
            ></textarea>
          </view>
        </scroll-view>
        <view class="edit flex align-center">
          <view class="left flex align-center justify-center" @click.stop="goEditTradition"
                v-if="page.options.is_share != 1">
            编辑
            <image class="ml_8" :src="`${IMG_URL}/index/familyTraditioDiscipline_jianli.png`"></image>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="share" class="right flex align-center justify-center ml_27" @tap.stop="traditionShare">
            分享
            <image class="ml_8" :src="`${IMG_URL}/index/familyTraditioDiscipline_fenxiang.png`"></image>
          </button>
          <!-- #endif -->
          <!--          &lt;!&ndash; #ifdef APP-PLUS &ndash;&gt;-->
          <!--          <button class="right flex align-center justify-center ml_27" @tap.stop="traditionShare">-->
          <!--            分享-->
          <!--            <image class="ml_8" :src="`${IMG_URL}/index/familyTraditioDiscipline_fenxiang.png`"></image>-->
          <!--          </button>-->
          <!--          &lt;!&ndash; #endif &ndash;&gt;-->
        </view>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <view v-if="page.showShareGuide"
          class="guide-wrap"
          @click.stop="page.showShareGuide = false"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { computed, nextTick, reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onShow, onReady, onShareAppMessage } from '@dcloudio/uni-app';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';
  import { h5_url } from '@/sheep/config';

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const page = reactive({
    options: {},
    family_tradition: '',
    familyInfo: {},
    showShareGuide: false,
  });
  const userInfo = computed(() => sheep.$store('user').userInfo);

  onLoad((options) => {
    page.options = options;
  });

  onReady(() => {
    // #ifdef H5
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: `${userInfo.value.nickname}欢迎您加入${page.options.name}`,
      link: `${h5_url}/#/pages/familyPage/familyTraditioDiscipline/familyTraditioDiscipline?is_share=1&family_id=${page.options.family_id}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    // #endif
  });

  onShow(async () => {
    nextTick(async () => {
      const { data } = await sheep.$api.family.getFamilyCulture({ family_id: page.options.family_id });
      page.familyInfo = data;
      page.family_tradition = data.family_tradition;
    });
  });

  async function goEditTradition() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg)
      return;
    }
    uni.setStorageSync('family_content', JSON.stringify(page.family_tradition));
    sheep.$router.go('/pages/family/editFamilyTradition', {
      family_id: page.options.family_id,
    });
  }

  function traditionShare() {
    // // #ifdef MP-WEIXIN
    // this.wxShare.title = `${this.options.is_share != 1 ? this.family_detail.familyName : this.options.family_name}家风家训`;
    // this.wxShare.path = `/pages/familyPage/familyTraditioDiscipline?is_share=1&family_id=${page.options.family_id}`;
    // // #endif
    // #ifdef H5
    page.showShareGuide = true;
    // #endif
    // #ifdef APP-PLUS
    sheep.$platform.share.shareAPP({
      title: `家风家训`,
      desc: '再小的家庭-也要有传承',
      link: `/pages/familyPage/familyTraditioDiscipline?is_share=1&family_id=${page.options.family_id}`,
      image: `${h5_url}/static/shiqin_transparent_icon.png`,
    });
    // #endif
  }

  // #ifdef MP-WEIXIN
  onShareAppMessage(() => {
    return {
      title: `家风家训`,
      path: `/pages/familyPage/familyTraditioDiscipline?is_share=1&family_id=${page.options.family_id}`,
      imageUrl: `${h5_url}/static/fenxiang_icon.png`,
    };
  });
  // #endif
</script>

<style lang="scss">
  .familyTraditioDiscipline {
    width: 750rpx;
    height: 100vh;
    background: #FAE6BC;

    .bg {
      width: 750rpx;
      height: 100vh;
      background: url($uni-bg-url-sq + '/index/familyTraditioDiscipline_bg.png') no-repeat;
      background-size: 750rpx 100vh;
      position: relative;

      .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 682rpx;
        height: 1148rpx;
        background: url($uni-bg-url-sq + "/index/familyTraditioDiscipline_center.png") no-repeat;
        background-size: 682rpx 1148rpx;

        .content_scroll {
          position: absolute;
          top: 46%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 432rpx;
          height: 767rpx;

          .text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 24rpx;
            color: #696969;
          }
        }

        .edit {
          position: absolute;
          left: 100rpx;
          top: 84%;
          transform: translateY(-50%);

          .left {
            width: 110rpx;
            height: 40rpx;
            background: #FFFFFF;
            border-radius: 21rpx 21rpx 21rpx 21rpx;
            border: 2rpx solid #696969;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 22rpx;
            color: #696969;

            image {
              width: 20rpx;
              height: 22rpx;
            }
          }

          .right {
            height: 40rpx;
            background: #FFFFFF;
            border-radius: 21rpx 21rpx 21rpx 21rpx;
            border: 2rpx solid #FF4206;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #FF4206;

            image {
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }
    }
  }


  .anniversariesList_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .anniversariesList_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      // font-weight: 500;
      font-size: 20rpx;
      color: rgba(0, 0, 0, 0.6);
    }
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>
